<template>
  <div class="menu-page">
    <el-row>
      <el-button
        size="small"
        icon="el-icon-plus"
        type="primary"
        plain
        @click="$refs.formPage.isShow=true"
      >新增</el-button>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px; margin-top: 10px"
      row-key="id"
      border

      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="title" label="菜单名称" />
      <el-table-column prop="path" label="菜单地址" />
      <el-table-column prop="mark" label="权限标识" />
      <el-table-column label="图标" align="center" width="80px">
        <template slot-scope="{ row }">
          <!-- <svg :svg-icon="row.icon" /> -->

          <svg-icon :class-name="row.icon" :icon-class="row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="component" label="组件路径" />
      <el-table-column label="类型" align="center">
        <template slot-scope="{ row }">
          <el-tag v-if="row.type === 1"> 菜单 </el-tag>
          <el-tag v-else type="warning"> 按钮 </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="是否显示">
        <template slot-scope="{ row }">
          <el-switch
            :value="row.is_show"
            :active-value="1"
            :inactive-value="0"
          />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="操作" align="center">
        <template>
          <el-button type="primary" icon="el-icon-edit" circle />
          <el-button type="warning" icon="el-icon-plus" circle />
          <el-button type="danger" icon="el-icon-delete" circle />

        </template>
      </el-table-column>
    </el-table>
    <FormPage ref="formPage" />
  </div>
</template>

<script>
import { getSysMenuListApi } from '@/api/system'
import FormPage from './components/FormPage.vue'
export default {
  name: 'MenuPage',
  components: {
    FormPage
  },
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.initDta()
  },
  methods: {
    async initDta() {
      const res = await getSysMenuListApi()
      this.tableData = res
    }
    // handlerClick() {

    // }
  }
}
</script>

<style lang="scss" scoped>
.menu-page {
  background-color: #fff;
  padding: 20px;
  margin-top: 10px;
}
</style>
